<template>
  <div>
    <!-- 搜索框 -->
     <div class="header">
      <div class="header_box">
        <HeaderCom leftText="饿了么"/>
        <!-- <HeaderCom rightType="text" rightText="添加地址" /> -->
      </div>
      <div class="search">
        <van-search v-model="value" shape="round"   background="transparent" placeholder="请输入搜索关键词" @click="onSearch"/>
      </div>
    </div>
    <!-- 轮播图 -->
    <Swipe/>
    <!-- 商家列表 -->
    <ShopList/>
  </div>
</template>

<script>
import HeaderCom from '@/components/header/headerCom.vue'
import Swipe from '@/components/home/Swipe.vue'
import ShopList from '@/components/home/ShopList.vue'
export default {
    components:{
        HeaderCom,
        Swipe,
        ShopList
    },
    data(){
      return{
        value:"",
      }
    },
    methods:{
    onSearch(){
      this.$router.push('/searchview')
    }
  },

}
</script>

<style lang="scss" scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .header{
    padding: 10px 0;
    background:linear-gradient(to right, rgba(0,155,226,1.000), 	rgba(0,128,203,1.000));
    ::v-deep .capsule{
     background-color: rgba(	rgb(10, 90, 137), 0.5);
    }
    ::v-deep .van-nav-bar .van-icon{
        color: rgba(#fff, 1);
      }
    .search{
      width: 94%;
      margin: 20px auto 10px;
     
    }
  }
  ::v-deep .van-field__left-icon{
       margin-left: 110px;
      }
 .swipe{
  width: 94%;
  margin: 20px auto 0;

  .van-swipe{
  border-radius: 5px;
  }
    .my-swipe .van-swipe-item {
      color: #fff;
      text-align: center;
  }
 }
</style>